<template>
  <div class="main_container">
    <el-row class="flex-height">
      <el-col :span="6">
        <div class="flex-height flex flex-column">
          <div class="flex-1 flex-column content-box1">
            <div class="flex-height flex-column align-center s-data-item">
              <div class="text-main font-16 pt-1">实时重点指标</div>
              <div class="flex-1 width-100">
                <div class="flex-row align-center flex-wrap justify-around flex-height">
                  <div class="text-center flex-row flex-column justify-center" v-for="(item,index) in data01" :key="index" style="width: 31%;height: 49%">
                    <div class="top-bg px-4 pb-1 font-36 bold text-white">{{item.cnt}}</div>
                    <div class="font-18 bold text-white">{{item.classify_name_f}}</div>
                  </div>
                </div>
              </div>

            </div>
          </div>
          <div class="flex-1 flex-column mt-1 content-box1">
            <div class="flex-height flex-column align-center s-data-item">
              <div class="text-main font-16 pt-1">各地区浏览量</div>
              <div ref="chartColumn" class="flex-1" style="width:100%;height: 100%"></div>
            </div>
          </div>
          <div class="flex-1 flex-column mt-1 content-box1">
            <div class="flex-height flex-column align-center s-data-item">
              <div class="text-main font-16 pt-1">各地区发布量</div>
              <div ref="chartColumn2" class=" flex-1" style="width:100%;height: 100%"></div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="flex-height flex flex-column px-1">
          <div class="flex-2 flex-column">
            <div class="flex-height flex-column align-center s-data-item relative">
              <img src="../../../assets/img/bigData/earth.png" alt="" style="width: 40%;height: 70%;margin-top: 6%">
              <img src="../../../assets/img/bigData/center-center.png" class="" alt="" style="width: 2rem;margin-bottom: -.4rem">
              <img src="../../../assets/img/bigData/center-bottom.png" alt="" style="width: 3.2rem">
              <div class="center-box-position flex-row align-center justify-center">
                <div class="absolute text-center" style="top: .3rem;left: 1rem;width: 1.6rem">
                  <div class="text-main font-28 bold">{{leijiLiulan}}</div>
                  <div class="text-white font-16 mb-1">累计浏览量</div>
                  <img src="../../../assets/img/bigData/center1.png" alt="" style="width: 3rem">
                </div>
                <div class="absolute justify-end flex-row flex-column align-end" style="top: .3rem;right: 1rem;width: 1.6rem">
                  <div class="text-main font-28 bold text-center width-100">{{leijiFabu}}</div>
                  <div class="text-white font-16 mb-1 text-center width-100">累计发布量</div>
                  <img src="../../../assets/img/bigData/center2.png" alt="" style="width: 3rem">
                </div>
                <div class="absolute text-center" style="bottom: .5rem;left: 1rem;width: 1.6rem">
                  <img src="../../../assets/img/bigData/center4.png" alt="" style="width: 3rem">
                  <div class="text-main font-28 bold">{{leijiYonghu}}</div>
                  <div class="text-white font-16 mb-1">累计用户数</div>
                </div>
                <div class="absolute justify-end flex-row flex-column align-end" style="bottom: .5rem;right: 1rem;width: 1.6rem">
                  <img src="../../../assets/img/bigData/center3.png" alt="" style="width: 3rem">
                  <div class="text-main font-28 bold text-center width-100">{{leijiXiazai}}</div>
                  <div class="text-white font-16 mb-1 text-center width-100">累计下载量</div>
                </div>
                <div class="center-box-center p-5 flex-row align-center justify-center">
                  <div class="">
                    <div class="font-18 text-white px-5 bold">累计机构数（个）</div>
                    <div class="flex-row mt-2">
                      <!--  leijiJigou -->
                      <div class="font-32 text-white bold py-1 px-2 num-box ml-1" v-for="(item, index) in leijiJigou" :key="index">{{item}}</div>
                    </div>
                  </div>
                  <div class="ml-5">
                    <div class="font-18 text-white px-5 bold">累计专家数（个）</div>
                    <div class="flex-row mt-2">
                      <div class="font-32 text-white bold py-1 px-2 num-box ml-1" v-for="(item, index) in leijiZhuanjia" :key="index">{{item}}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="flex-1 flex-column mt-1 content-box1">
            <div class="flex-height flex-column align-center s-data-item">
              <div class="text-main font-16 pt-1">本年新增资源数</div>
              <div class=" flex-1" style="width:100%;height: 100%;overflow-y: auto">
                <el-table
                    :data="data05" header-align="center"
                    style="width: 100%">
                  <el-table-column
                      prop="index" align="center"
                      label="排名"
                      width="180">
                  </el-table-column>
                  <el-table-column
                      prop="area_city" align="center"
                      label="所属区域"
                      width="180">
                  </el-table-column>
                  <el-table-column align="center"
                                   prop="cnt"
                                   label="发行量">
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="flex-height flex flex-column">
          <div class="flex-1 flex-column content-box1">
            <div class="flex-height flex-column align-center s-data-item">
              <div class="text-main font-16 pt-1">浏览渠道</div>
              <div ref="chartColumn3" class=" flex-1" style="width:100%;height: 100%"></div>
            </div>
          </div>
          <div class="flex-1 flex-column mt-1 content-box1">
            <div class="flex-height flex-column align-center s-data-item">
              <div class="text-main font-16 pt-1">近5年全省健康获奖作品数</div>
              <div ref="chartColumn4" class=" flex-1" style="width:100%;height: 100%"></div>
            </div>
          </div>
          <div class="flex-1 flex-column mt-1 content-box1">
            <div class="flex-height flex-column align-center s-data-item">
              <div class="text-main font-16 pt-1">近5年健康队伍建设</div>
              <div ref="chartColumn5" class=" flex-1" style="width:100%;height: 100%"></div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { FormItem } from 'element-ui'
export default {
  name: 'BigDatapage1',
  data () {
    return {
      data01: [],
      data02: [],
      data03: [],
      data04: [],
      data05: [],
      data06: [],
      data07: [],
      data08: [],
      tabIndex: 0,
      currentDate: '',
      currentTime: '',
      tableData: [{
        date: '第一名',
        name: '西安市',
        address: '10000'
      }, {
        date: '第二名',
        name: '铜川市',
        address: '10000'
      }, {
        date: '第三名',
        name: '商洛市',
        address: '1000'
      }, {
        date: '第四名',
        name: '榆阳',
        address: '99'
      }]
    }
  },
  created () {
    this.getStatis01()
    this.getStatis04()
    this.getStatis05()
  },
  mounted () {
    // this.initChart1()
    this.getStatis02()// 会调用 initChart1
    // this.initChart2()
    this.getStatis03()

    // this.initChart3()
    this.getStatis06()
    // this.initChart4()
    this.getStatis07()
    // this.initChart5()
    this.getStatis08()
  },
  computed: {
    // 累计机构数(个)  累计专家数(人)
    leijiJigou () {
      const temp = this.data04.find(item => item.name == '累计机构数(个)')
      if (temp) {
        let result = temp.value
        // 转为4位数组
        result += 10000
        result += ''
        result = result.substring(1)
        result = result.split('')
        return result
      } else {
        return [0, 0, 0, 0]
      }
    },
    leijiZhuanjia () {
      const temp = this.data04.find(item => item.name == '累计专家数(人)')
      if (temp) {
        let result = temp.value
        // 转为4位数组
        result += 10000
        result += ''
        result = result.substring(1)
        result = result.split('')
        return result
      } else {
        return [0, 0, 0, 0]
      }
    },
    leijiLiulan(){
      const temp = this.data04.find(item => item.name == '累计浏览量')
      if (temp) {
        return temp.value
      } else {
        return 0
      }
    },
    leijiFabu(){
      const temp = this.data04.find(item => item.name == '累计发布量')
      if (temp) {
        return temp.value
      } else {
        return 0
      }
    },
    leijiYonghu(){
      const temp = this.data04.find(item => item.name == '累计用户数')
      if (temp) {
        return temp.value
      } else {
        return 0
      }
    },
    leijiXiazai(){
      const temp = this.data04.find(item => item.name == '累计下载量')
      if (temp) {
        return temp.value
      } else {
        return 0
      }
    },
  },
  methods: {
    getdata(select,pageNo=1,rownumber=1000){
      return {
            "serviceName": select,
            "colNames": [
            "*"
            ],
            "condition": [],
            "relation_condition": {},
            "page": {
              "pageNo": pageNo,
              "rownumber": rownumber
            }
      }
    }
    ,
    getStatis01 () {
      let select = 'srvjk_cnt_zhst_sszdzb_select'
      this.$http.post(`/${select}?${select}`,this.getdata(select)).then(res => {
        if (res.data.state == 'SUCCESS') {
          //移除 总发行量
          res.data.data=res.data.data.filter(item=>item.classify_name_f!='')
          this.data01 = res.data.data.slice(0,6)
        }
      })
    },
    getStatis02 () {

      // this.$http.get('/bigScreen/getStatis02').then(res => {
 
          this.data02 = [{name: '西安市', value: 500},{name: '咸阳市', value: 400},{name: '渭南市', value: 300},{name: '安康市', value: 200},{name: '铜川市', value: 100},{name: '延安市', value: 50},{name: '商洛市', value: 20}]
          this.initChart1()
        
      // })
    },
    getStatis03 () {
      let select = 'srvjk_cnt_zhst_gdqfb_select'
      this.$http.post(`/${select}?${select}`,this.getdata(select)).then(res => {
        if (res.data.state == 'SUCCESS') {
          this.data03 = res.data.data
          this.initChart2()
        }
      })
    },

    getStatis04 () {
      let select = 'srvjk_cnt_zhst_main_select'
      this.$http.post(`/${select}?${select}`,this.getdata(select)).then(res => {
        if (res.data.state == 'SUCCESS') {
          let data = []
          let keys = ['累计访问用户数','累计下载量','累计用户数','累计发布量','累计专家数(人)','累计收藏量','累计浏览量','累计机构数(个)']
          let values = Object.values(res.data.data[0])
          for(let i=0;i<keys.length;i++){
            let obj = {
              name:keys[i],
              value:values[i]
            }
            data.push(obj)
            }
          this.data04=data
        }
      })
    },
    getStatis05 () {
      let select = 'srvjk_cnt_zhst_bnxz_select'
      this.$http.post(`/${select}?${select}`,this.getdata(select)).then(res => {
        if (res.data.state == 'SUCCESS') {
          let data = res.data.data.sort(function(a,b){return b.cnt-a.cnt})
          data.forEach((item, index) => {
            const num = index + 1
            item.index = '第' + num + '名'
          })
          this.data05 = res.data.data
        }
      })
    },

    getStatis06 () {
      let select = 'srvjk_cnt_zhst_agent_select'
      this.$http.post(`/${select}?${select}`,this.getdata(select)).then(res => {
       if (res.data.state == 'SUCCESS') {
          this.data06 = res.data.data
          this.initChart3()
        }
      })
    },
    getStatis07 () {
      let select = 'srvjk_cnt_zhst_hjzp_select'
       this.$http.post(`/${select}?${select}`,this.getdata(select)).then(res => {
        if (res.data.state == 'SUCCESS') {
          this.data07 = res.data.data
          this.initChart4()
        }
      })
    },
    getStatis08 () {
      let select = 'srvjk_cnt_zhst_jkdw_select'
      this.$http.post(`/${select}?${select}`,this.getdata(select)).then(res => {
        if (res.data.state == 'SUCCESS') {
          this.data08 = res.data.data
          this.initChart5()
        }
      })
    },
    initChart1 () {
      const nameArr = this.data02.map(item => item.name)
      const valueArr = this.data02.map(item => item.value)
      this.chartColumn = this.$echarts.init(this.$refs.chartColumn)
      const option = {
        backgroundColor: 'transparent',
        title: {
          text: '',
          left: '12%',
          top: '13%',
          textStyle: {
            color: '#fff',
            fontSize: 14
          }
        },
        legend: {
          show: true,
          icon: 'circle',
          top: '13%',
          itemWidth: 6,
          itemHeight: 6,
          itemGap: 25,
          textStyle: {
            color: '#fff',
            fontSize: 14
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: [{
          type: 'category',
          // data: ['西安市', '咸阳市', '渭南市', '安康市', '铜川市', '延安市', '商洛市'],
          data: nameArr,
          axisLine: {
            lineStyle: {
              color: '#ddd'
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            interval: 0,
            textStyle: {
              color: '#fff'
            },
            margin: 15
          },
          boundaryGap: false
        }],
        yAxis: [{
          type: 'value',
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#ddd'
            }
          },
          axisLabel: {
            textStyle: {
              color: '#587396'
            }
          },
          splitLine: {
            show: false
          }
        }],
        series: [{
          name: '浏览量',
          type: 'line',
          // data: [5, 12, 11, 4, 25, 16, 1],
          data: valueArr,
          symbolSize: 6,
          symbol: 'circle',
          smooth: true,
          lineStyle: {
            color: '#9E87FF'
          },
          itemStyle: {
            normal: {
              color: '#9E87FF',
              borderColor: '#9E87FF'
            }
          },
          areaStyle: {
            color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: '#9E87FFb3'
            },
            {
              offset: 1,
              color: '#9E87FF03'
            }
            ])
          },
          emphasis: {
            itemStyle: {
              color: {
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 0.5,
                colorStops: [{
                  offset: 0,
                  color: '#9E87FF'
                },
                {
                  offset: 0.4,
                  color: '#9E87FF'
                },
                {
                  offset: 0.5,
                  color: '#fff'
                }, {
                  offset: 0.7,
                  color: '#fff'
                }, {
                  offset: 0.8,
                  color: '#fff'
                }, {
                  offset: 1,
                  color: '#fff'
                }
                ]
              },
              borderColor: '#9E87FF',
              borderWidth: 2
            }
          }
        }
        ]
      }
      this.chartColumn.setOption(option)
    },
    initChart2 () {
      // let regionArr = this.data03.map(item => item.area_city)
      // regionArr = Array.from(new Set(regionArr))
      // // 遍历 地区，生成 机构数量 专家数量
      // const jigouArr = []
      // const zhuanjaiArr = []
      let mess= []
      this.data03.forEach(item => {
        if(mess.findIndex(item1=>item1.area_city==item.area_city)==-1){
          if(item.role_name=='机构'){
            mess.push({
              area_city:item.area_city,
              jigou:item.cnt,
            })
            if(item.role_name=='专家'){
              mess.push({
                area_city:item.area_city,
                zhuanjia:item.cnt,
              })
            }
          }
        }else{
          let index=mess.findIndex(item1=>item1.area_city==item.area_city)
          if(item.role_name=='机构'){
            mess[index].jigou=item.cnt
          }
          if(item.role_name=='专家'){
            mess[index].zhuanjia=item.cnt
          }
        }       
      })
      let regionArr=mess.map(item=>item.area_city)
      const jigouArr=mess.map(item=>item.jigou)
      const zhuanjaiArr=mess.map(item=>item.zhuanjia)
      this.chartColumn2 = this.$echarts.init(this.$refs.chartColumn2)
      const option = {
        backgroundColor: 'transparent',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            label: {
              show: true
            }
          }
        },
        grid: {
          left: '10%',
          top: '18%',
          right: '5%',
          bottom: '22%'
        },
        legend: {
          data: ['机构', '专家'],
          top: '4%',
          textStyle: {
            color: '#1FC3CE',
            fontSize: 14
          }
        },
        xAxis: {
          // data:[ '商洛市', '渭南市', '咸阳市', '榆林市', '商洛市', '铜川市', '宝鸡市', '延安市', '汉中市', '安康市' ],
          data: regionArr,
          axisLine: {
            show: true, // 隐藏X轴轴线
            lineStyle: {
              color: '#3d5269',
              width: 1
            }
          },
          axisTick: {
            show: true, // 隐藏X轴刻度
            alignWithLabel: true
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff', // X轴文字颜色
              fontSize: 14
            },
            interval: 0,
            rotate: 0
          }
        },
        yAxis: [{
          type: 'value',
          name: '',
          nameTextStyle: {
            color: '#fff',
            fontSize: 14
          },
          splitLine: {
            show: true,
            lineStyle: {
              width: 1,
              color: '#3d5269'
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff', // X轴文字颜色
              fontSize: 14
            },
            interval: 0,
            // rotate: 30
          }
        },
        {
          type: 'value',
          name: '',
          nameTextStyle: {
            color: '#fff',
            fontSize: 14
          },
          position: 'right',
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: '#396A87',
              width: 2
            }
          },
          axisLabel: {
            show: true,
            formatter: '{value} %', // 右侧Y轴文字显示
            textStyle: {
              color: '#396A87',
              fontSize: 14
            }
          }
        }
        ],
        series: [{
          name: '机构',
          type: 'bar',
          barWidth: 14,
          itemStyle: {
            normal: {
              color: '#19ECFF',
              barBorderRadius: [0, 0, 0, 0]
            }
          },
          // data: [24, 45, 43, 35, 76, 154, 86, 42, 68, 97]
          data: jigouArr
        },
        {
          name: '专家',
          type: 'bar',
          barWidth: 14,
          itemStyle: {
            normal: {
              color: '#BC6FD6',
              barBorderRadius: [0, 0, 0, 0]
            }
          },
          // data: [133, 23, 114, 67, 89, 35, 67, 96, 90, 46]
          data: zhuanjaiArr
        }
        ]
      }
      this.chartColumn2.setOption(option)
    },
    initChart3 () {
      this.chartColumn3 = this.$echarts.init(this.$refs.chartColumn3)
      var img = ''

      // var trafficWay = [{ name: '小程序', value: 20 }, { name: '电脑端', value: 10 }, { name: '其他', value: 30 }]
      var trafficWay = this.data06

      var data = []
      var color = ['#00ffff', '#00cfff', '#006ced', '#ffe000', '#ffa800', '#ff5b00', '#ff3000']
      for (var i = 0; i < trafficWay.length; i++) {
        data.push({
          value: trafficWay[i].cnt,
          name: trafficWay[i].data_subtype,
          itemStyle: {
            normal: {
              borderWidth: 5,
              shadowBlur: 20,
              borderColor: color[i],
              shadowColor: color[i]
            }
          }
        }, {
          value: 2,
          name: '',
          itemStyle: {
            normal: {
              label: {
                show: false
              },
              labelLine: {
                show: false
              },
              color: 'rgba(0, 0, 0, 0)',
              borderColor: 'rgba(0, 0, 0, 0)',
              borderWidth: 0
            }
          }
        })
      }
      var seriesOption = [{
        name: '',
        type: 'pie',
        clockWise: false,
        radius: [85, 69],
        hoverAnimation: false,
        itemStyle: {
          normal: {
            label: {
              show: true,
              position: 'outside',
              color: '#ddd',
              formatter: function (params) {
                // var percent = 0
                // var total = 0
                // for (var i = 0; i < trafficWay.length; i++) {
                //   total += trafficWay[i].value
                // }
                // percent = ((params.value / total) * 100).toFixed(0)
                if (params.name !== '') {
                  return params.name + '：' + params.value
                } else {
                  return ''
                }
              }
            },
            labelLine: {
              length: 10,
              length2: 50,
              show: true,
              color: '#00ffff'
            }
          }
        },
        data: data
      }]
      const option = {
        backgroundColor: 'transparent',
        color: color,
        graphic: {
          elements: [{
            type: 'image',
            z: 3,
            style: {
              image: img,
              width: 108,
              height: 108
            },
            left: 'center',
            top: 'center',
            position: [100, 100]
          }]
        },
        grid: {
          left: '8%',
          top: '18%',
          right: '5%',
          bottom: '22%'
        },
        tooltip: {
          show: false
        },
        toolbox: {
          show: false
        },
        series: seriesOption
      }
      this.chartColumn3.setOption(option)
    },
    initChart4 () {
      const yearArr = this.data07.map(item => item.release_year+'年')
      const valueArr = this.data07.map(item => item.cnt)
      this.chartColumn4 = this.$echarts.init(this.$refs.chartColumn4)
      const option = {
        backgroundColor: 'transparent',
        grid: [
          {
            left: '18%',
            top: '8%',
            right: '5%',
            bottom: '22%'
          },
          {
            left: '18%',
            top: '8%',
            right: '5%',
            bottom: '22%'
          }
        ],
        xAxis: [
          {
            max: 50,
            splitNumber: 8,
            axisLine: {
              lineStyle: {
                color: '#10899A'
              }
            },
            axisTick: {
              show: false,
              inside: true,
              lineStyle: {
                color: '#10899A',
                fontSize: 14,
                fontFamily: 'PingFangSC',
                fontWeight: 300
              }
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              formatter: (params) => {
                return '{marginTop|' + params + '}'
              },
              rich: {
                marginTop: {
                  padding: [0, 0, 0, 0],
                  color: '#fff',
                  fontSize: 14,
                  fontFamily: 'PingFangSC',
                  fontWeight: 300

                }
              }
            }
          },
          {
            gridIndex: 1,
            show: true,
            offset: 13,
            axisLine: {
              lineStyle: {
                color: '#10899A'
              }
            }
          }
        ],
        yAxis: [{
          name: '',
          // data: ['2019年', '2020年', '2021年', '2022年', '2023年'],
          data: yearArr,
          axisLabel: {
            show: false
          },
          nameTextStyle: {
            color: '#fff',
            fontSize: 14,
            fontFamily: 'PingFangSC',
            fontWeight: 300,
            padding: [0, 0, 8, 0]
          },
          axisLine: {
            lineStyle: {
              color: '#10899A'
            }
          },
          axisTick: {
            show: false,
            lineStyle: {
              color: '#10899A',
              fontSize: 14,
              fontFamily: 'PingFangSC',
              fontWeight: 300
            }
          }

        }, {
          gridIndex: 1,
          // data: ['2019年', '2020年', '2021年', '2022年', '2023年'],
          data: yearArr,
          position: 'left',
          nameTextStyle: {
            color: '#06D3CD',
            padding: [0, 0, 0, 8],
            fontSize: 14,
            fontFamily: 'PingFangSC',
            fontWeight: 300
          },
          axisLabel: {
            formatter: (params) => {
              return '{marginTop|' + params + '}'
            },
            rich: {
              marginTop: {
                padding: [0, 0, 0, 0],
                color: '#fff',
                fontSize: 14,
                fontFamily: 'PingFangSC',
                fontWeight: 300

              }
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#10899A'
            }
          },
          splitLine: {
            show: false
          }
        }],
        series: [{
          name: '订单数量',
          type: 'bar',
          itemStyle: {
            barBorderRadius: 8,
            color: this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{
              offset: 0,
              color: 'rgba(0,216,255,.3)'
            },
            {
              offset: 1,
              color: '#00D8FF'
            }
            ])
          },
          barWidth: 20,
          // data: [482, 378, 446, 518, 238, 358, 312, 378, 220, 452, 302, 372]
          data: valueArr
        }]
      }
      this.chartColumn4.setOption(option)
    },
    initChart5 () {
      // 获取所有 城市
      let regionArr = this.data08.map(item => item.area_city)
      regionArr = Array.from(new Set(regionArr))
      // 生成机构数 专家数
      const jigouArr = []
      const zhuanjiaArr = []
      regionArr.forEach(item => {
        let temp = this.data08.find(item2 => item2.area_city == item )
        if (temp) {
          jigouArr.push(temp.organ_cnt)
          zhuanjiaArr.push(temp.expert_cnt)
        } else {
          jigouArr.push(0)
        }
      })

      this.chartColumn5 = this.$echarts.init(this.$refs.chartColumn5)
      // const dedicatedData = [45, 106, 126, 52, 74, 50, 56, 88, 125]  //机构
      const dedicatedData = jigouArr
      // const generalData = [42, 126, 146, 22, 54, 80, 96, 78, 115]  //专家
      const generalData = zhuanjiaArr
      // const labelData = ['商洛市', '渭南市', '咸阳市', '榆林市', '商洛市', '铜川市', '宝鸡市', '延安市', '汉中市']
      const labelData = regionArr
      // 对话框图片
      const titleArray = ['机构', '专家']
      const option = {
        backgroundColor: 'transparent',
        grid: {
          top: '18%',
          right: '5%',
          left: '5%',
          bottom: '10%',
          containLabel: true
        },
        tooltip: {
          show: true,
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          textStyle: {
            fontSize: 16
          },
          // 自定义 tooltip
          formatter: function (params) {
            let dom = `${params[0].name}
              <br/>`
            for (const i of params) {
              dom += `${i.marker}
              ${i.seriesName}
                :
              ${i.value}
              <br/>`
            }
            return dom
          }
        },
        legend: {
          show: true,
          itemWidth: 16,
          top: '5%',
          left: 'center',
          data: titleArray,
          textStyle: {
            color: 'RGB(193,223,255)'
          }
        },
        xAxis: [{
          type: 'category',
          color: '#59588D',
          data: labelData,
          axisLabel: {
            margin: 20,
            color: '#fff',
            textStyle: {
              fontSize: 14
            }
          },
          axisLine: {
            lineStyle: {
              color: '#08175b'
            }
          },
          axisTick: {
            show: true,
            lineStyle: {
              color: '#283352'
            }
          }
        }],
        yAxis: [{
          min: 0,
          max:'dataMax',
          axisLabel: {
            color: '#fff',
            textStyle: {
              fontSize: 14
            }
          },
          axisLine: {
            lineStyle: {
              color: '#283352'
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            lineStyle: {
              color: '#283352',
              type: 'dashed'
            }
          }
        }],
        series: [{
          name: titleArray[0],
          type: 'bar',
          data: dedicatedData,
          barWidth: '14px',
          itemStyle: {
            barBorderRadius: 10,
            normal: {
              color: '#19ECFF',
              barBorderRadius: [0, 0, 0, 0]
            }
          }
        },
        {
          name: titleArray[1],
          type: 'bar',
          data: generalData,
          barWidth: '14px',
          itemStyle: {
            barBorderRadius: 10,
            normal: {
              color: '#BC6FD6',
              barBorderRadius: [0, 0, 0, 0]
            }
          }
        }
        ]
      }
      this.chartColumn5.setOption(option)
    }
  }
}
</script>

<style scoped>
@import "../../../assets/scss/pages/data.scss";
.text-main{
  color: #00D8FF;
}
.height-3{
  height: 32.6%;
}
.el-col{
  height: 100%;
}
.center-box{
  margin-left:10px;
  margin-right:10px;
  width: calc(100% - 20px);
}
.content-box1{
  background: url("../../../assets/img/bigData/left-bg.png");
  background-size: 100% 100%;
}
.top-bg{
  background: url("../../../assets/img/bigData/top1.png");
  background-size: 100% 100%;
}
/deep/.el-table, /deep/.el-table th, /deep/.el-table tr, /deep/.el-table--enable-row-hover .el-table__body tr:hover>td{
  background: transparent !important;
}
/deep/.el-table th.is-leaf, /deep/.el-table td{
  border: none !important;
}
/deep/.el-table{
  color: #fff !important;
}
/deep/.el-table thead{
  color: #00FFF0 !important;
}
/deep/.el-table::before {
  background-color: transparent !important;
}
.center-box-position{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.center-box-center{
  background: url("../../../assets/img/bigData/center.png");
  background-size: 100% 100%;
}
.num-box{
  background: url("../../../assets/img/bigData/number.png");
  background-size: 100% 100%;
}

.main_container {
  height: 100%;
}
/deep/.el-container {
  flex-direction: column;
}
.flex-height {
  height: 100%;
}
/deep/.el-col{
  height: 100%;
}
</style>
